import React, { Component } from 'react'
import { Table, Tabs, Tree } from 'antd'
import { PAGESIZE } from '../const/const'
const TabPane = Tabs.TabPane
const TreeNode = Tree.TreeNode

let i = 1

class TableTransfer extends Component {
  state = {
    selectedRows: [],
    selectId: [],
    rSelect: [],
    tab: '1',
  }
  handleLeftClick = () => {
    let d = []
    let row = this.state.selectedRows
    row.forEach((r) => (r.dis = true))
    if (this.state.tab === '1') {
      d = [...this.props.selectData, ...row]
      this.props.getSelectData(d)
    } else {
      d = [...this.props.outData, ...row]
      this.props.getOutData(d)
    }
    this.setState({ selectedRows: [], selectId: [] })
  }
  handleRightClick = () => {
    let id = this.state.rSelect[0]
    let list = this.props.tableData
    for (let i = 0; i < list.length; i++) {
      if (list[i].id === id) {
        list[i].dis = false
        break
      }
    }
    if (this.state.tab === '1') {
      let selectData = this.props.selectData.filter((d) => d.id !== id)
      this.props.getSelectData(selectData)
    } else {
      let outData = this.props.outData.filter((d) => d.id !== id)
      this.props.getOutData(outData)
    }
    this.setState({ rSelect: [] })
  }
  onRightSelect = (info, e) => {
    this.setState({ rSelect: info })
  }
  handleTabChange = (e) => {
    this.setState({ tab: e })
    this.setState({ rSelect: [] })
  }
  render() {
    let { columns, tableData, title } = this.props
    const rowSelection = {
      selectedRowKeys: this.state.selectId,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows.filter((r) => r.dis === false),
          selectId: selectedRowKeys,
        })
      },
      getCheckboxProps: (record) => {
        return {
          disabled: record.dis, // Column configuration not to be checked
        }
      },
    }
    return (
      <div>
        <div className="ant-transfer">
          <div className="table-transfer-list">
            <Table
              rowKey="id"
              size="middle"
              bordered={false}
              rowSelection={rowSelection}
              columns={columns}
              dataSource={tableData}
              pagination={{ pageSize: PAGESIZE }}
            />
          </div>
          <div className="ant-transfer-operation">
            <button
              onClick={this.handleLeftClick}
              disabled={this.state.selectedRows.length === 0}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
            >
              <span>
                <i className="anticon anticon-right"></i>
              </span>
            </button>
            <button
              onClick={this.handleRightClick}
              disabled={this.state.rSelect.length === 0}
              type="button"
              className="ant-btn ant-btn-primary ant-btn-sm"
            >
              <span>
                <i className="anticon anticon-left"></i>
              </span>
            </button>
          </div>
          <div
            className="tab-transfer-list"
            style={{ minWidth: '400px', height: 500 }}
          >
            <div className="table-tabs">
              <Tabs
                defaultActiveKey="1"
                style={{ display: 'inline-block' }}
                onChange={this.handleTabChange}
                tabBarStyle={{ width: '400px' }}
              >
                <TabPane tab={title[1]} key="1">
                  <div className="table-tabs-list">
                    <Tree
                      onSelect={this.onRightSelect}
                      selectedKeys={this.state.rSelect}
                    >
                      {this.props.selectData.map((item, index) => {
                        return (
                          <TreeNode
                            title={item.name}
                            key={item.id}
                            isLeaf={true}
                            disabled={false}
                          />
                        )
                      })}
                    </Tree>
                  </div>
                </TabPane>
                <TabPane tab={title[2]} key="2">
                  <div className="table-tabs-list">
                    <Tree
                      onSelect={this.onRightSelect}
                      selectedKeys={this.state.rSelect}
                    >
                      {this.props.outData.map((item, index) => {
                        return (
                          <TreeNode
                            title={item.name}
                            key={item.id}
                            isLeaf={true}
                            disabled={false}
                          />
                        )
                      })}
                    </Tree>
                  </div>
                </TabPane>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default TableTransfer
